TypeScripti veapiirid: veakäsitluse tüüpmustrid vastupidavate rakenduste jaoks

Tarkvaraarenduse maailmas on ootamatud vead vältimatud. Alates võrguprobleemidest kuni ootamatute andmevorminguteni peavad rakendused olema valmis neid olukordi elegantselt käsitlema. TypeScript oma võimsa tüübisüsteemiga pakub tugevat raamistikku vastupidavate rakenduste loomiseks. See artikkel süveneb TypeScripti veapiiride kontseptsiooni, uurides erinevaid veakäsitluse tüüpmustreid, parimaid tavasid ja reaalseid näiteid, et anda teile teadmisi stabiilsema ja paremini hooldatava koodi loomiseks.

Veakäsitluse olulisuse mõistmine

Tõhus veakäsitlus on positiivse kasutuskogemuse ja rakenduse üldise tervise jaoks ülioluline. Kui vigu ei käsitleta, võivad need põhjustada:

• Krahhid ja ettearvamatu käitumine: Püüdmata erandid võivad peatada teie koodi täitmise, mis viib krahhide või ettearvamatute tulemusteni.
• Andmekadu ja rikkumine: Andmetöötluse või salvestamise ajal tekkinud vead võivad põhjustada andmete kadu või rikkumist, mõjutades kasutajaid ja süsteemi terviklikkust.
• Turvanõrkused: Halva veakäsitluse korral võib lekkida tundlikku teavet või tekkida võimalusi pahatahtlikeks rünnakuteks.
• Negatiivne kasutuskogemus: Krüptiliste veateadete või rakenduse tõrgetega kokku puutuvad kasutajad kogevad tõenäoliselt pettumust, mis viib usalduse ja vastuvõtu kaotamiseni.
• Vähenenud tootlikkus: Arendajad kulutavad aega käsitlemata vigade silumisele ja lahendamisele, takistades üldist arenduse tootlikkust ja aeglustades väljalasketsükleid.

Hea veakäsitlus seevastu pakub:

• Elegantne taandumine: Rakendus jätkab tööd, isegi kui konkreetne osa kohtub veaga.
• Informatiivne tagasiside: Kasutajad saavad selgeid ja täpseid veateateid, mis aitavad neil probleemi mõista ja lahendada.
• Andmete terviklikkus: Olulisi toiminguid hallatakse tehinguliselt, kaitstes olulist kasutajateavet.
• Parem stabiilsus: Rakendus muutub ootamatute sündmuste suhtes vastupidavamaks.
• Parem hooldatavus: Lihtsam on probleeme tuvastada, diagnoosida ja parandada, kui need tekivad.

Mis on veapiirid TypeScriptis?

Veapiirid on disainimuster, mida kasutatakse JavaScripti vigade püüdmiseks komponendipuu konkreetses osas ja tagavara kasutajaliidese elegantseks kuvamiseks kogu rakenduse kokku krahhimise asemel. Kuigi TypeScriptil endal puudub spetsiifiline "veapiiride" funktsioon, on selliste piiride loomise põhimõtted ja tehnikad hõlpsasti rakendatavad ja TypeScripti tüübikindluse abil täiustatavad.

Põhiidee on eraldada potentsiaalselt vigadele kalduv kood spetsiaalsesse komponenti või moodulisse. See komponent toimib ümbrisena, jälgides selles olevat koodi. Kui tekib viga, "püüab" veapiiri komponent vea kinni, vältides selle levimist komponendipuus ülespoole ja potentsiaalselt rakenduse kokku krahhimist. Selle asemel saab veapiir kuvada tagavara kasutajaliidese, logida vea või proovida probleemist taastuda.

Veapiiride kasutamise eelised on:

• Isolatsioon: Hoiab ära vigade leviku teie rakenduse ühest osast teistesse.
• Tagavara kasutajaliides: Pakub kasutajasõbralikumat kogemust kui täielikult rikutud rakendus.
• Vigade logimine: Hõlbustab veateabe kogumist silumiseks ja jälgimiseks.
• Parem hooldatavus: Lihtsustab veakäsitluse loogikat ning muudab koodi värskendamise ja hooldamise lihtsamaks.

Veakäsitluse tüüpmustrid TypeScriptis

TypeScripti tüübisüsteem on väga tõhus, kui seda kombineerida õigete veakäsitluse mustritega. Siin on mõned levinud ja tõhusad mustrid vigade haldamiseks teie TypeScripti rakendustes:

1. Try-Catch plokid

JavaScripti ja TypeScripti veakäsitluse põhiliseks ehitusplokiks on `try-catch` plokk. See võimaldab käivitada koodi `try` plokis ja püüda kinni kõik visatud erandid. See on sünkroonne operatsioon, mis sobib ideaalselt vigade käsitlemiseks otse funktsiooni sees.

            function fetchData(url: string): Promise<any> {
  try {
    return fetch(url).then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    });
  } catch (error) {
    console.error("An error occurred while fetching data:", error);
    // Handle the error (e.g., display an error message to the user)
    return Promise.reject(error);
  }
}
            

              
                Copy
              
            
          

Selles näites proovib funktsioon `fetchData` tuua andmeid antud URL-ilt. Kui `fetch` kutse ebaõnnestub (nt võrguviga, vale URL) või kui vastuse staatus pole korras, visatakse viga. Seejärel käsitleb `catch` plokk viga. Pange tähele `Promise.reject(error)` kasutamist vea levitamiseks, et ka kutsuv kood saaks seda käsitleda. See on tavaline asünkroonsete toimingute puhul.

2. Lubadused (Promises) ja asünkroonne veakäsitlus

Asünkroonsed toimingud on JavaScriptis tavalised, eriti API-de, andmebaasidega suhtlemise ja faili-sisendi/väljundi käsitlemisel. Lubadused (Promises) pakuvad võimsat mehhanismi vigade käsitlemiseks nendes stsenaariumides. `try-catch` plokk on kasulik, kuid paljudel juhtudel käsitsete vigu Promise'i `.then()` ja `.catch()` meetodites.

            function fetchData(url: string): Promise<any> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error("An error occurred while fetching data:", error);
      // Handle the error (e.g., display an error message to the user)
      return Promise.reject(error);
    });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log("Data fetched successfully:", data);
  })
  .catch(error => {
    console.error("Failed to fetch data:", error);
    // Display a user-friendly error message
  });
            

              
                Copy
              
            
          

Selles näites kasutab funktsioon `fetchData` Promise'i asünkroonse `fetch` toimingu käsitlemiseks. Vead püütakse kinni `.catch()` plokis, mis võimaldab teil neid konkreetselt asünkroonse toimingu jaoks käsitleda.

3. Veaklassid ja kohandatud veatüübid

TypeScript võimaldab teil määratleda kohandatud veaklasse, pakkudes struktureeritumat ja informatiivsemat veakäsitlust. See on suurepärane tava korduvkasutatava ja tüübikindla veakäsitluse loogika loomiseks. Kohandatud veaklasside loomisega saate:

• Lisada spetsiifilisi veakoode: Eristada erinevaid veatüüpe.
• Pakkuda konteksti: Salvestada veaga seotud lisanduvaid andmeid.
• Parandada loetavust ja hooldatavust: Muuta oma veakäsitluskood kergemini arusaadavaks.

            class ApiError extends Error {
  statusCode: number;
  code: string;

  constructor(message: string, statusCode: number, code: string) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.code = code;
    // Assign the prototype explicitly
    Object.setPrototypeOf(this, ApiError.prototype);
  }
}

async function getUserData(userId: number): Promise<any> {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      let errorMessage = 'Failed to fetch user data';
      if (response.status === 404) {
        errorMessage = 'User not found';
      }
      throw new ApiError(errorMessage, response.status, 'USER_NOT_FOUND');
    }
    return await response.json();
  } catch (error: any) {
    if (error instanceof ApiError) {
      console.error("API Error:", error.message, error.statusCode, error.code);
      // Handle specific API error based on the code
      if (error.code === 'USER_NOT_FOUND') {
        // Show a 'user not found' message
      }
    } else {
      console.error("An unexpected error occurred:", error);
      // Handle other errors
    }
    throw error; // Re-throw or handle the error
  }
}

getUserData(123)
  .then(userData => console.log("User data:", userData))
  .catch(error => console.error("Error retrieving user data:", error));
            

              
                Copy
              
            
          

See näide defineerib `ApiError` klassi, mis pärib sisseehitatud `Error` klassist. See sisaldab `statusCode` ja `code` omadusi, et pakkuda rohkem konteksti. Funktsioon `getUserData` kasutab seda kohandatud veaklassi, püüdes ja käsitledes spetsiifilisi veatüüpe. Operaatori `instanceof` kasutamine võimaldab tüübikindlat kontrolli ja spetsiifilist veakäsitlust veatüübi alusel.

4. Tüüp `Result` (funktsionaalne veakäsitlus)

Funktsionaalne programmeerimine kasutab sageli tüüpi `Result` (nimetatakse ka `Either` tüübiks), et esindada kas edukat tulemust või viga. See muster pakub puhast ja tüübikindlat viisi vigade käsitlemiseks. Tüübil `Result` on tavaliselt kaks varianti: `Ok` (eduks) ja `Err` (ebaõnnestumiseks).

            
// Define a generic Result type

interface Ok<T> {
    type: 'ok';
    value: T;
}

interface Err<E> {
    type: 'err';
    error: E;
}

type Result<T, E> = Ok<T> | Err<E>

function divide(a: number, b: number): Result<number, string> {
  if (b === 0) {
    return { type: 'err', error: 'Division by zero' };
  }
  return { type: 'ok', value: a / b };
}

const result1 = divide(10, 2);
const result2 = divide(10, 0);

if (result1.type === 'ok') {
  console.log('Result:', result1.value);
} else {
  console.error('Error:', result1.error);
}

if (result2.type === 'ok') {
  console.log('Result:', result2.value);
} else {
  console.error('Error:', result2.error);
}

            

              
                Copy
              
            
          

Funktsioon `divide` tagastab kas tüübi `Ok` `Result` objekti, mis sisaldab jagamise tulemust, või tüübi `Err` `Result` objekti, mis sisaldab veateadet. See muster tagab, et kutsuja on sunnitud selgesõnaliselt käsitlema nii edukaid kui ka ebaõnnestunud stsenaariume, vältides käsitlemata vigu.

5. Dekoraatorid (keerukama veakäsitluse jaoks – harva kasutatakse otse piiride rakendamiseks)

Kuigi see ei ole otseselt veapiiride muster, saab dekoraatoreid kasutada veakäsitluse loogika meetoditele deklaratiivsel viisil rakendamiseks. See võib vähendada teie koodi kordusi. Kuid see kasutus on veapiiride põhirakenduse puhul vähem levinud kui ülaltoodud muud mustrid.

            
function handleError(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = async function (...args: any[]) {
    try {
      const result = await originalMethod.apply(this, args);
      return result;
    } catch (error: any) {
      console.error(`Error in ${propertyKey}:`, error);
      // Handle the error here (e.g., log, display a default value, etc.)
      return null; // Or throw a more specific error
    }
  };

  return descriptor;
}

class MyService {
  @handleError
  async fetchData(url: string): Promise<any> {
    // Simulate an error
    if (Math.random() < 0.5) {
      throw new Error('Simulated network error');
    }
    const response = await fetch(url);
    return await response.json();
  }
}

            

              
                Copy
              
            
          

See näide defineerib dekoraatori `@handleError`. Dekoraator ümbritseb algset meetodit, püüdes kinni kõik vead ja logides need. See võimaldab veakäsitlust ilma algse meetodi koodi otse muutmata.

Veapiiride rakendamine esiosa raamistikes (Reacti näide)

Kuigi põhikontseptsioonid jäävad sarnaseks, erineb veapiiride rakendamine veidi sõltuvalt kasutatavast esiosa raamistikust. Keskendume Reactile, mis on interaktiivsete kasutajaliideste loomiseks kõige levinum raamistik.

Reacti veapiirid

React pakub spetsiifilist mehhanismi veapiiride loomiseks. Veapiir on Reacti komponent, mis püüab JavaScripti vigu kõikjal oma alamkomponentide puus, logib need vead ja kuvab varukasutajaliidese kogu rakenduse kokkukrahhi asemel. Veapiirid püüavad vigu renderdamise, elutsükli meetodite ja kõigi oma alamkomponentide konstruktorite ajal.

Põhimeetodid veapiiri loomiseks Reactis:

• `static getDerivedStateFromError(error)`: See staatiline meetod kutsutakse välja pärast seda, kui järeltulija komponent viskab vea. See saab vea parameetrina ja peaks tagastama objekti oleku värskendamiseks. Seda kasutatakse oleku värskendamiseks, näiteks `error` lipu seadmiseks `true`-ks, et käivitada varukasutajaliides.
• `componentDidCatch(error, info)`: See meetod kutsutakse välja pärast seda, kui järeltulija komponent viskab vea. See saab vea ja objekti, mis sisaldab teavet vea visanud komponendi kohta. Seda kasutatakse tavaliselt vea logimiseks. See meetod kutsutakse välja ainult vigade puhul, mis tekivad selle järeltulijate renderdamise ajal.

            import React from 'react';

interface Props {
    children: React.ReactNode;
}

interface State {
    hasError: boolean;
    error: Error | null;
}

class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // You can also log the error to an error reporting service
    console.error('Uncaught error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div className="error-boundary">
          <h2>Something went wrong.</h2>
          <p>We're working on fixing it!</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.stack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

See `ErrorBoundary` komponent ümbritseb oma alamkomponente. Kui mistahes viga visatakse ümbritsetud komponentides, kutsutakse välja meetod `getDerivedStateFromError`, et värskendada olekut, põhjustades komponendi uuesti renderdamise varukasutajaliidesega. Meetodit `componentDidCatch` kasutatakse vigade logimiseks. ErrorBoundary kasutamiseks tuleb lihtsalt ümbritseda oma rakenduse osad sellega:

            
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <MyComponentThatMightError />
      </ErrorBoundary>
      <AnotherComponent />
    </div>
  );
}

            

              
                Copy
              
            
          

Paigutades `ErrorBoundary` komponendi potentsiaalselt probleemsete komponentide ümber, isoleerite need komponendid ja pakute vigade korral varukasutajaliidese, vältides kogu rakenduse kokkukrahhi.

Veapiirid teistes raamistikes (kontseptuaalselt)

Kuigi rakendamise detailid erinevad, saab veapiiride põhiprintsiipe rakendada ka teistes esiosa raamistikes, nagu Angular ja Vue.js. Tavaliselt saavutaksite selle sarnaste strateegiate abil:

• Angular: Komponendi veakäsitluse, kohandatud veakäitlejate ja vahendajate (interceptors) kasutamine. Kaaluge Angulari `ErrorHandler` klassi kasutamist ja potentsiaalselt problemaatiliste komponentide ümbitsemist veakäsitluse loogikaga.
• Vue.js: `try...catch` plokkide kasutamine komponentides või globaalsete veakäitlejate kasutamine, mis on registreeritud läbi `Vue.config.errorHandler`. Vue'l on ka komponenditasandi veakäsitluse funktsioonid, mis sarnanevad Reacti veapiiridega.

Parimad tavad veapiiride ja veakäsitluse jaoks

Veapiiride ja veakäsitluse tüüpmustrite tõhusaks kasutamiseks kaaluge järgmisi parimaid tavasid:

• Eraldage veaohtlik kood: Ümbrisage komponendid või koodi osad, mis tõenäoliselt vead viskavad, veapiiridesse või asjakohastesse veakäsitluse konstruktsioonidesse.
• Pakkuge selgeid veateateid: Kujundage kasutajasõbralikud veateated, mis annavad kasutajale konteksti ja juhiseid. Vältige krüptilist või tehnilist žargooni.
• Logige vigu tõhusalt: Rakendage tugev vealogimissüsteem vigade jälgimiseks, asjakohase teabe (virnaraamistikud, kasutaja kontekst jne) kogumiseks ja silumise hõlbustamiseks. Tootmiskeskkondade jaoks kasutage teenuseid nagu Sentry, Bugsnag või Rollbar.
• Rakendage varukasutajaliideseid: Pakkuge sisulisi varukasutajaliideseid, mis käsitlevad vigu elegantselt ja takistavad kogu rakenduse kokkukrahhi. Varukasutajaliides peaks teavitama kasutajat juhtunust ja vajadusel pakkuma välja tegevusi, mida ta saab ette võtta.
• Kasutage kohandatud veaklasse: Looge kohandatud veaklasse, et esindada erinevat tüüpi vigu ja lisada täiendavat konteksti ja teavet tõhusamaks veakäsitluseks.
• Kaaluge veapiiride ulatust: Ärge ümbritsge kogu rakendust ühte veapiirisse, kuna see võib varjata alusprobleeme. Selle asemel paigutage veapiirid strateegiliselt komponentide või rakenduse osade ümber.
• Testige veakäsitlust: Kirjutage ühiktestid ja integratsioonitestid, et tagada teie veakäsitluse loogika ootuspärane toimimine ja varukasutajaliideste õige kuvamine. Testige stsenaariume, kus vead võivad tekkida.
• Jälgige ja analüüsige vigu: Jälgige regulaarselt oma rakenduse vealogisid, et tuvastada korduvaid probleeme, jälgida veatrendeid ja tuvastada parendusvaldkondi.
• Püüdke andmete valideerimise poole: Valideerige välistest allikatest saadud andmeid, et vältida ebaõigete andmevormingute põhjustatud ootamatuid vigu.
• Käsitlege lubadusi (Promises) ja asünkroonseid toiminguid hoolikalt: Veenduge, et käsitlete vigu, mis võivad tekkida asünkroonsetes toimingutes, kasutades `.catch()` plokke või asjakohaseid veakäsitlusmehhanisme.

Reaalsed näited ja rahvusvahelised kaalutlused

Vaatame mõningaid praktilisi näiteid, kuidas veapiire ja veakäsitluse tüüpmustreid saab rakendada reaalsetes stsenaariumides, võttes arvesse rahvusvahelistumist:

Näide: E-kaubanduse rakendus (andmete toomine)

Kujutage ette e-kaubanduse rakendust, mis kuvab toodete nimekirju. Rakendus toob tooteandmed taustaprogrammi API-st. Veapiiri kasutatakse API-kõnedega seotud potentsiaalsete probleemide lahendamiseks.

            
interface Product {
  id: number;
  name: string;
  price: number;
  currency: string;
  // ... other product details
}

class ProductList extends React.Component<{}, { products: Product[] | null; loading: boolean; error: Error | null }> {
  state = { products: null, loading: true, error: null };

  async componentDidMount() {
    try {
      const products = await this.fetchProducts();
      this.setState({ products, loading: false });
    } catch (error: any) {
      this.setState({ error, loading: false });
    }
  }

  async fetchProducts(): Promise<Product[]> {
    const response = await fetch('/api/products'); // API endpoint
    if (!response.ok) {
      throw new Error(`Failed to fetch products: ${response.status}`);
    }
    return await response.json();
  }

  render() {
    const { products, loading, error } = this.state;

    if (loading) {
      return <div>Loading products...</div>;
    }

    if (error) {
      return (
        <div className="error-message">
          <p>Sorry, we're having trouble loading the products.</p>
          <p>Please try again later.</p>
          <p>Error details: {error.message}</p> {/* Log the error message for debugging */}
        </div>
      );
    }

    return (
      <ul>
        {products && products.map(product => (
          <li key={product.id}>{product.name} - {product.price} {product.currency}</li>
        ))}
      </ul>
    );
  }
}

// Error Boundary (React Component)
class ProductListErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean, error: Error | null}> {
    constructor(props: any) {
      super(props);
      this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error: Error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true, error: error };
    }

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
      // You can also log the error to an error reporting service
      console.error('Product List Error:', error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        // Render a fallback UI (e.g., error message, retry button)
        return (
          <div className="product-list-error">
            <h2>Oops, something went wrong!</h2>
            <p>We are unable to load product information at this time.</p>
            <button onClick={() => window.location.reload()} >Retry</button>
          </div>
        );
      }
      return this.props.children;
    }
}

// Usage
function App() {
  return (
    <div>
      <ProductListErrorBoundary>
        <ProductList />
      </ProductListErrorBoundary>
    </div>
  );
}


            

              
                Copy
              
            
          

Selles näites:

• `ProductList` toob tooteandmeid. See käsitleb laadimisolekut, edukat tooteandmete ja veaolukorda komponendi sees.
• `ProductListErrorBoundary` kasutatakse komponendi `ProductList` ümbitsemiseks, et püüda vigu renderdamise ja API-kõnede ajal.
• Kui API-päring ebaõnnestub, kuvab `ProductListErrorBoundary` kasutajasõbraliku veateate, selle asemel et kasutajaliides kokku krahhiks.
• Veateade pakub “proovi uuesti” valikut, mis võimaldab kasutajal lehte värskendada.
• Tooteandmete `currency` välja saab õigesti kuvada, kasutades rahvusvahelistamisteeke (nt Intl JavaScriptis), mis pakuvad valuuta vormindamist vastavalt kasutaja lokaadi seadetele.

Näide: Rahvusvaheline vormi valideerimine

Kaaluge vormi, mis kogub kasutajaandmeid, sealhulgas aadressiteavet. Korralik valideerimine on hädavajalik, eriti kui tegemist on erinevate riikide kasutajatega, kellel on erinevad aadressiformaadid.

            
// Assume a simplified address interface
interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

class AddressForm extends React.Component<{}, { address: Address; errors: { [key: string]: string } }> {
  state = {
    address: {
      street: '',
      city: '',
      postalCode: '',
      country: 'US', // Default country
    },
    errors: {},
  };

  handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = event.target;
    this.setState((prevState) => ({
      address: {
        ...prevState.address,
        [name]: value,
      },
      errors: {
        ...prevState.errors,
        [name]: '', // Clear any previous errors for this field
      },
    }));
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { address } = this.state;
    const errors = this.validateAddress(address);
    if (Object.keys(errors).length > 0) {
      this.setState({ errors });
    }
    else {
      // Submit the form (e.g., to an API)
      alert('Form submitted!'); // Replace with actual submission logic
    }
  };

  validateAddress = (address: Address) => {
    const errors: { [key: string]: string } = {};

    // Validation rules based on the selected country
    if (!address.street) {
      errors.street = 'Street address is required';
    }
    if (!address.city) {
      errors.city = 'City is required';
    }

    // Example: postal code validation based on the country
    switch (address.country) {
      case 'US':
        if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid US postal code';
        }
        break;
      case 'CA':
        if (!/^[A-Za-z][0-9][A-Za-z][ ]?[0-9][A-Za-z][0-9]$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid Canadian postal code';
        }
        break;
      // Add more countries and validation rules
      default:
        if (!address.postalCode) {
          errors.postalCode = 'Postal code is required';
        }
        break;
    }

    return errors;
  };

  render() {
    const { address, errors } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="street">Street:</label>
        <input
          type="text"
          id="street"
          name="street"
          value={address.street}
          onChange={this.handleChange}
        /
>
        {errors.street && <div className="error">{errors.street}</div>}

        <label htmlFor="city">City:</label>
        <input
          type="text"
          id="city"
          name="city"
          value={address.city}
          onChange={this.handleChange}
        /
>
        {errors.city && <div className="error">{errors.city}</div>}

        <label htmlFor="postalCode">Postal Code:</label>
        <input
          type="text"
          id="postalCode"
          name="postalCode"
          value={address.postalCode}
          onChange={this.handleChange}
        /
>
        {errors.postalCode && <div className="error">{errors.postalCode}</div>}

        <label htmlFor="country">Country:</label>
        <select
          id="country"
          name="country"
          value={address.country}
          onChange={this.handleChange}
        >
          <option value="US">United States</option>
          <option value="CA">Canada</option>
          <!-- Add more countries -->
        </select>

        <button type="submit">Submit</button>
      </form>
    );
  }
}


            

              
                Copy
              
            
          

Selles näites:

• Komponent `AddressForm` haldab vormi andmeid ja valideerimisloogikat.
• Funktsioon `validateAddress` teostab valideerimisi valitud riigi alusel.
• Rakendatakse riigispetsiifilisi postiindeksi valideerimisreegleid (näidatud on USA ja Kanada).
• Rakendus kasutab `Intl` API-t lokaadipõhiseks vormindamiseks. Seda kasutatakse numbrite, kuupäevade ja valuutade dünaamiliseks vormindamiseks vastavalt praeguse kasutaja lokaadi seadetele.
• Veateated saab tõlkida, et pakkuda paremat kasutuskogemust globaalselt.
• See lähenemine võimaldab kasutajatel täita vormi kasutajasõbralikul viisil, olenemata nende asukohast.

Rahvusvahelistumise parimad tavad:

• Kasutage lokaliseerimisteeki: Teegid nagu i18next, react-intl või LinguiJS pakuvad funktsioone teksti tõlkimiseks, kuupäevade, numbrite ja valuutade vormindamiseks kasutaja lokaadi alusel.
• Pakkuge lokaadi valikut: Laske kasutajatel valida oma eelistatud keel ja piirkond. See võib toimuda rippmenüü, seadete kaudu või automaatse tuvastamise teel brauseri seadete alusel.
• Käsitlege kuupäeva, kellaaja ja numbrivorminguid: Kasutage `Intl` API-t kuupäevade, kellaaegade, numbrite ja valuutade asjakohaseks vormindamiseks erinevate lokaatide jaoks.
• Arvestage teksti suunaga: Kujundage oma kasutajaliides nii, et see toetaks nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) teksti suundi. RTL toe abistamiseks on olemas teegid.
• Arvestage kultuuriliste erinevustega: Olge oma kasutajaliidese ja veateadete kujundamisel teadlik kultuurinormidest. Vältige keele või pildimaterjali kasutamist, mis võib teatud kultuurides olla solvav või sobimatu.
• Testige erinevates lokaatides: Testige oma rakendust põhjalikult erinevates lokaatides, et veenduda, et tõlge ja vormindamine töötavad õigesti ja et kasutajaliides kuvatakse korrektselt.

Järeldus

TypeScripti veapiirid ja tõhusad veakäsitluse tüüpmustrid on usaldusväärsete ja kasutajasõbralike rakenduste loomise olulised komponendid. Neid tavasid rakendades saate vältida ootamatuid krahhe, parandada kasutajakogemust ning lihtsustada silumis- ja hooldusprotsesse. Alates põhilistest `try-catch` plokkidest kuni keerukama `Result` tüübi ja kohandatud veaklassideni annavad need mustrid teile võimaluse luua vastupidavaid rakendusi, mis peavad vastu reaalse maailma väljakutsetele. Neid tehnikaid omaks võttes kirjutate paremat TypeScripti koodi ja pakute paremat kogemust oma globaalsetele kasutajatele.

Pidage meeles valida veakäsitlusmustrid, mis sobivad kõige paremini teie projekti vajaduste ja rakenduse keerukusega. Keskenduge alati selgete, informatiivsete veateadete ja varukasutajaliideste pakkumisele, mis juhendavad kasutajaid läbi kõikvõimalike probleemide. Järgides neid juhiseid, saate luua rakendusi, mis on vastupidavamad, hooldatavamad ja lõppkokkuvõttes edukad globaalsel turul.

Kaaluge nende mustrite ja tehnikatega eksperimenteerimist oma projektides ning kohandage neid vastavalt oma rakenduse spetsiifilistele nõuetele. See lähenemine aitab kaasa paremale koodikvaliteedile ja positiivsemale kogemusele kõigi kasutajate jaoks.